<template>
  <div>
    <a-button type="primary" @click="addBtnClick([types[0]])">
      <a-icon type="plus" />
    </a-button>
    <br />
    <br />
    <a-table :data-source="models" bordered :pagination="false" row-key="_id">
      <a-table-column key="title" title="标题" data-index="title" width="250px" />
      <a-table-column key="icon" title="图标" data-index="icon" width="80px">
        <template slot-scope="icon">
          <a-icon :type="icon" />
        </template>
      </a-table-column>
      <a-table-column key="index" title="索引" data-index="index" width="80px" />
      <a-table-column key="describe" title="描述" data-index="describe" />
      <a-table-column key="_id" title="操作" data-index="_id" width="200px">
        <template slot-scope="...data">
          <a-button v-if="data[1].type !== 'FILE'" type="link" size="small" @click="addBtnClick([types[1], types[2]], ...data)">添加</a-button>
          <a-button type="link" size="small" @click="modifyBtnClick(...data)">修改</a-button>
          <a-button type="link" size="small" @click="removeBtnClick(...data)">删除</a-button>
        </template>
      </a-table-column>
    </a-table>
    <w-add ref="WAdd" @reload="loadList" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import WAdd from "@/components/admin/auth/page/add";
import { Admin } from "@/config/api";
import WSubCell from "@/components/admin/auth/page/subCell";
const tableExpand = (list: any) => {
  list.forEach((element1: any) => {
    element1.children.forEach((element2: any) => {
      if (element2.type === "FILE") {
        element2.children = null;
      } else {
        element2.children.forEach((element3: any) => {
          element3.children = null;
        });
      }
    });
  });
};

@Component({
  name: "AdminAuthPage",
  layout: "admin",
  components: {
    WAdd,
    WSubCell,
  },
  async asyncData({ app }) {
    const { $wAxios } = app;
    const data = await $wAxios.$get(Admin.auth.page.all);
    tableExpand(data);
    return { models: data };
  },
  head() {
    return {
      title: "页面权限",
    };
  },
})
export default class AdminAuthPage extends Vue {
  models: Array<any> = [];

  types = [
    { name: "文件夹", value: "FOLDER" },
    { name: "子文件夹", value: "SUB_FOLDER" },
    { name: "文件", value: "FILE" },
  ];

  /**
   * 添加按钮点击
   */
  addBtnClick(types: any, key?: string, superModel?: any) {
    (this.$refs.WAdd as any).show(types, null, superModel);
  }

  /**
   * 修改按钮点击
   */
  modifyBtnClick(key: string, row: any) {
    (this.$refs.WAdd as any).show(this.types, row);
  }

  /**
   * 加载列表数据
   */
  loadList() {
    this.$wAxios
      .$get(Admin.auth.page.all)
      .then((data) => {
        tableExpand(data);
        this.models = data;
      })
      .catch(() => {});
  }

  /**
   * 删除按钮点击
   */
  removeBtnClick(key: string, row: any) {
    if (row.children.length > 0) {
      this.$message.error("必须先删除全部子节点");
      return;
    }
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(`${Admin.auth.page.delete}${row._id}`);
    }, row.name).then(() => {
      this.loadList();
    });
  }

  showPage(row: any) {
    (this.$refs.WPagePop as any).show(row);
  }

  showApi(row: any) {
    (this.$refs.WApiPop as any).show(row);
  }
}
</script>

<style scoped></style>
